<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<script language="javascript" type="text/javascript" src="/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.navigate.js"></script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.time.js"></script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.axislabels.js"></script>
<script language="javascript">
function refreshData(){
    $.ajax({
      url:"/xml/grdata.php?grid=1",
      method:'GET',
      dataType:'json',
      success:function handleData(series){
       plot.setData(series);
     plot.setupGrid();
     plot.draw();
      },
      error: function onError(xhr, ajaxOptions, thrownError){
	alert(ajaxOptions);
	alert(thrownError);
      }
    });
}

var plot;
var options = {
    xaxes: [{mode:'time', timezone: 'browser', timeformat:'%Y-%m-%d %H:%M'}],
    pan:   {interactive: true,frameRate: 10},
    yaxes: [{tickLength:5,tickColor:'light gray',position:'left',  color:'red',panRange: false,axisLabelUseCanvas: true,axisLabelFontSizePixels:9,axisLabelPadding:-16},
	    {tickLength:5,tickColor:'light gray',position:'right', color:'blue', panRange: false,axisLabelUseCanvas: true,axisLabelFontSizePixels:9,axisLabelPadding:-16},
	    {tickLength:5,tickColor:'light gray',position:'left',  color:'green',panRange: false,axisLabelUseCanvas: true,axisLabelFontSizePixels:9,axisLabelPadding:-16},
	    {tickLength:5,tickColor:'light gray',position:'right', color:'brown',panRange: false,axisLabelUseCanvas: true,axisLabelFontSizePixels:9,axisLabelPadding:-16},
	    {tickLength:5,tickColor:'light gray',position:'left',  color:'gray',panRange: false,axisLabelUseCanvas: true,axisLabelFontSizePixels:9,axisLabelPadding:-16},
	    {tickLength:5,tickColor:'light gray',position:'right', color:'black',  panRange: false,axisLabelUseCanvas: true,axisLabelFontSizePixels:9,axisLabelPadding:-16}],
    legend:{show:true,backgroundOpacity:0},
    series:{lines: {show:true},points: {show:true,radius:2}},
    grid:  {autoHighlight:false,axisMargin: 16,color:'gray',hoverable: true, clickable: false, backgroundColor:'white',margin:{top:32,left:20,bottom:0,right:32}}
  };

$(function () {
plot=$.plot($("#graphdiv"),"",options);
refreshData();
});

</script>
</HEAD>
<BODY style='height:100%'>
<div id="graphdiv" style='position:absolute;width:100%;height:100%;border:1px solid red'/>
</BODY>
</HTML>
